* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


.clear {
    clear:both;
}

/*================
    加载进度样式
  ================*/
.load {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9999;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    overflow:hidden !important;
    color:#000;
}

.con-load {
    position: relative;
    width: 100px;
    height: 100px;
}

.load img {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite
}

.load p {
    width: 80px;
    height: 80px;
    font-size: 6vw;
    font-weight: bold;
    color: #fff;
    line-height: 80px;
    position: absolute;
    top: 60%;
    left: 50%;
    margin-top: -40px;
    z-index: 9999;
    text-align: center;
    margin-left: -40px;
}

/*==================
      加载动画
  ==================*/
    .load3 {
        position: absolute;
        width:80px;
        height:80px;
        background: url('') no-repeat;
        margin-left:-40px;
        margin-top:-40px;
        left:50%;
        top:50%;
        animation:small .8s infinite;
        background-position: center;
    }

    @keyframes small {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(.4);
        }

        100% {
            transform: scale(1);
        }
    }

    .load2 {
        position: absolute;
        left:50%;
        top:40%;
        background: url('http://wx.xiaooo.cn/mydata/xhg/img/main3.png');/*动画帧图片*/
        height: 60px;/*单个帧高度*/
        width: 50px;/*单个帧宽度*/
        margin-left: -25x;
        margin-top: -25px;
        margin-left: -25px;
        animation:test 4.5s steps(9) infinite,updown .8s infinite;/*step中的值为图片的个数*/
        /*-webkit-animation:test 3.5s steps(6) infinite;*/
    }

    @keyframes test {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 0 540px;/*图片的总高度*/
        }
    }

    @keyframes updown{
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-100px);
        }

        100% {
            transform: translateY(0px);
        }
}

/*======================
        横竖屏代码
  =====================*/
/* 样式放在结尾，防止 base64 图片造成拥塞 */
@-webkit-keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

@keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

#orientLayer {
    display: none;
}

@media screen and (min-aspect-ratio: 13/9) {
    #orientLayer {
        display: block;
    }

    body {
        width: 100%;
        height: 100%;
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9997
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center
}

.mod-orient-layer__icon-orient {
    background-image: url('');
    display: inline-block;
    width: 67px;
    height: 109px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-background-size: 67px;
    background-size: 67px
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 15px;
    color: #fff
}